<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-zhibiao">
        <input id="tableId" name="tableId" th:value="${id}" type="hidden">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">部门名称：</label>
                    <div class="col-sm-8">
                        <div class="form-control-static" th:text="${table.memberName}"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">绩效方案名称：</label>
                    <div class="col-sm-8">
                        <div class="form-control-static" th:text="${table.projectName}"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tableArea" id="tableDiv">
            <h4 class="form-header h4">绩效考评</h4>
            <table class="table table-striped" id="table">
                <!--在此处填充表格数据-->
            </table>
        </div>
    </form>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button class="btn btn-sm btn-primary" onclick="doSubmit()" type="button"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button class="btn btn-sm btn-danger" onclick="closeItem()" type="button"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:inline="javascript" type="text/javascript">
    var prefix = ctx + "zzjx/pefassproject";
    $(function () {
        var tableId = $("#tableId").val(); //表单id
        if (tableId != "") {
            $.modal.loading("请等待加载预览信息!");
            $.ajax({
                url: ctx + "zzjx/pefctasstable/preview"
                , data: {"tableId": tableId}
                , dataType: "JSON"
                , type: "GET"
                , async: false
                , success: function (result) {
                    var dictData = result.dictData;
                    var list = result.list;
                    buildTable($('#table'), dictData.length, list.length, dictData, list);
                    $.modal.closeLoading();
                }, error: function () {
                    $.modal.closeLoading();
                    $.modal.alertError("获取预览信息失败!");
                }
            })
        }
    })

    function doSubmit() {
        if ($.validate.form()) {
            var data = $("#form-zhibiao").serializeArray();
            data.push({"name": "tableDataJson", "value": JSON.stringify($("#table").bootstrapTable('getData'))});
            $.operate.saveTab(ctx + "zzjx/pefctasstable/doUpdateTableIndData", data);
        }
    }

    /**
     * 构建预览信息表格
     * @param $el
     * @param cells
     * @param rows
     * @param dictData
     * @param peftempletindicatorList
     */
    function buildTable($el, cells, rows, dictData, peftempletindicatorList) {
        var i, j, row,
            columns = [],
            data = [];
        //拼接table,拼接表头
        columns.push({
            field: "id",
            title: "ID"
        });
        columns.push({
            field: "indName",
            title: "被评价部门"
        });
        columns.push({
            field: "target1",
            title: "满意度评价分数",
            formatter: function (value, row, index) {
                if (value == "" || typeof (value) == "undefined") {
                    return '<input type="text"  oninput = "value=value.replace(/[^\\d]/g,\'\')"  class="inp" name="target1" value="" onblur="changeData(' + index + ', this);" />';
                } else {
                    return '<input type="text" class="inp" name="target1" value="' + value + '" onblur="changeData(' + index + ', this);" />';
                }
            }
        });


        $el.bootstrapTable('destroy').bootstrapTable({
            columns: columns,
            data: peftempletindicatorList,
            search: false
        });
    }

    function saveData(index, field, value) {
        $("#table").bootstrapTable('updateCell', {
            index: index,       //行索引
            field: field,       //列名
            value: value        //cell值
        })
    }

    function changeData(index, obj) {
        var value = $(obj).val();
        var name = $(obj).attr('name');
        //通过 index 获取指定的行
        var row = $("#table").bootstrapTable('getOptions').data[index];
        //将 input 的值存进 row 中
        row[name] = value;
        //更新指定的行，调用 'updateRow' 则会将 row 数据更新到 data 中，然后再重新加载
        $("#table").bootstrapTable('updateRow', {index: index, row: row});
    }
</script>
</body>
</html>
